import account from "@/store/account";
import { Input, PageContainer, View, Text } from "@tarojs/components";
import { observer } from "mobx-react";
import React, { useEffect, useState } from "react";
import { accountMemberType } from "@/types";
import "./index.scss"
import { MoneyFormat } from "@/utils/format";
import http from "@/request";
import { ShowToast } from "@/utils";

interface memberDataType {
    balance: number
    expense: number
    income: number
    userId: number
}
const EditBalance: React.FC<{
    membersData: memberDataType[],
    show: boolean,
    onClose: (isSure?: boolean) => void
}> = observer(({ show, onClose, membersData }) => {

    const [members, setMembers] = useState<(accountMemberType & memberDataType)[]>([])
    const initAmountInput = (e, index) => {
        members[index].initAmount = Number(e.detail.value) || 0
        setMembers([...members])
    }
    const amountInput = (e, index) => {
        const value = Number(e.detail.value) || 0
        const item = members[index]
        const balance = Number(item.balance) || 0
        members[index].initAmount = value - balance
        setMembers([...members])
    }
    const saveForm = () => {
        Promise.all(members.map(member => {
            return http.post('/account-user/update', {
                id: member?.id,
                initAmount: member?.initAmount
            })
        })).then(() => {
            ShowToast('更新成功')
            account.doUpDateAccount()
            onClose(true)
        }).catch(_ => {
            ShowToast('更新成员信息失败')
        })
    }

    useEffect(() => {
        const dataMap = membersData.reduce((sum, item) => {
            return {
                ...sum,
                [item.userId]: item
            }
        }, {})
        setMembers((account.activeAccount?.members || []).map(item => {
            return {
                ...item,
                ...(dataMap[item.userId || ''] || {})
            }
        }))
    }, [membersData, show])

    return (
        <PageContainer show={show} onLeave={() => onClose()} overlay round zIndex={9999}>
            <View className="edit-blance-dialog card-background text-main-color flex-column">
                <View className="dialog-title font-size32">编辑成员资金</View>
                <View className="dialog-content flex1">
                    {
                        members.map((person, index) => {
                            return <View key={person.userId}>
                                <View className="list-item-container page-background">
                                    <View className="list-title">{person.userName}</View>
                                    <View className="form-item-container flex-row flex-item">
                                        <View className="form-item-label">年度收入</View>
                                        <View className="flex1">
                                            <View className="form-input disabled">{MoneyFormat(person.income)}</View>
                                        </View>
                                    </View>
                                    <View className="form-item-container flex-row flex-item">
                                        <View className="form-item-label">年度支出</View>
                                        <View className="flex1">
                                            <View className="form-input disabled">{MoneyFormat(person.expense)}</View>
                                        </View>
                                    </View>
                                    <View className="form-item-container flex-row flex-item">
                                        <View className="form-item-label">初始资金</View>
                                        <Input className="form-input flex1"
                                            placeholder-class="placeholder-style"
                                            placeholder="请输入"
                                            value={MoneyFormat(person.initAmount, 2, '')}
                                            onBlur={(e) => initAmountInput(e, index)}
                                            type="digit" >
                                        </Input>
                                    </View>
                                    <View className="form-item-container flex-row flex-item">
                                        <View className="form-item-label">资金结余</View>
                                        <Input className="form-input flex1"
                                            placeholder-class="placeholder-style"
                                            placeholder="请输入"
                                            value={MoneyFormat((person.balance || 0) + (person.initAmount || 0), 2, '')}
                                            onBlur={e => amountInput(e, index)}
                                            type="digit" >
                                        </Input>
                                    </View>
                                </View>
                            </View>
                        })
                    }
                    <View className="page-bottom flex-column flex-item card-background">
                        <View className="half-line"></View>
                        <View className="comment-input-container flex-row flex-item">
                            <View className="flex1"></View>
                            <View onClick={() => onClose()} className="btn font-size24 preview-btn flex-row flex-center">
                                <Text className="data-val font-size24">取消</Text>
                            </View>
                            <View className="flex1"></View>
                            <View onClick={saveForm} className="btn font-size24 save-btn flex-row flex-center">
                                <Text className="data-val font-size24">保存</Text>
                            </View>
                            <View className="flex1"></View>
                        </View>
                    </View>
                </View>
            </View>
        </PageContainer>
    )
})

export default EditBalance